<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/jquery_3.2.1_jquery.js"></script>
    <style>
        table {
            border: 1px solid blueviolet;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <td>序号</td>
                <td>景点名称</td>
                <td>类型</td>
                <td>地址</td>
                <td>经度</td>
                <td>纬度</td>
                <td>口碑</td>
                <td>时间</td>
                <td>价格</td>
            </tr>
        </thead>
        <tbody id="contain"></tbody>
    </table>
    <script type="text/javascript"> $(function () {
            // 根据数组的内容,生成页面中的table表格
            // 建立数组
            $.get("point1.json", function (data) {
                var arr = data
                // 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
                var str = '';
                //外层循环,生成tr
                for (var i = 0; i <= arr.length - 1; i++) {
                    // 外层循环生成tr标签,循环几次,就生成几个tr标签
                    // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
                    str += '<tr>';

                    // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
                    str += `<td>${i + 1}</td>`;

                    //当前行,对应的二维数组，循环的对象是 arr[i] , 
                    //生成 arr[i] 的所有的索引下标，通过索引下标,获取对应的数据。
                    // 起始数值是0 终止数值是 arr[i]的最大索引下标，arr[i]的length-1
                    for (var n in arr[i]) {
                        str += "<td align='center'>" + arr[i][n] + "</td>";
                    }
                    str += '</tr>';
                }
                // 将定义好的内容,写入到taody标签中
                contain.innerHTML = str;
            })
        })</script>
</body>

</html>